<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/css/swiper.min.css" />
		<script src="../js/js/swiper.min.js"></script>
		<script src="../jquery-2.2.3.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#main {
				/*text-align: center;*/
				/*width: 910px;*/
				margin: 0 auto;
				/*border: 2px solid black;*/
			}
			
			a {
				text-decoration: none;
			}
			
			li {
				list-style: none;
			}
			
			#header {
				width: 910px;
				height: 100px;
				margin: 0 auto;
				position: relative;
				/*background: url(../img/FEAF692865C98592E5E9384A5F338282.png) right  ;*/
			}
			
			#logo {
				position: absolute;
				top: 3px;
			}
			
			#nav {
				/*border: 1px solid black;*/
				width: 726px;
				height: 100px;
				position: absolute;
				left: 180px;
				top: 4px;
				background: url(../img/FEAF692865C98592E5E9384A5F338282.png) right center;
				/*background-color: rgb(34, 100, 64);*/
				/*border-radius: 5px;*/
			}
			
			#nav li {
				display: inline-block;
				line-height: 33px;
				margin-left: 50px;
				margin-top: 33px;
			}
			
			#nav a {
				color: white;
				margin-left: 8px;
			}
			
			#nav a:hover {
				color: gold;
			}
			
			.last {
				width: 146px;
				background: url(../img/menu.jpg) right;
			}
			
			#drop-menu {
				display: none;
				z-index: 10;
				position: absolute;
				width: 200px;
				top: 72px;
				left: 350px;
				background: rgb(12, 162, 81);
				font-size: 13px;
				border: 2px solid darkgrey;
			}
			
			#drop-menu li {
				height: 30px;
				padding-left: 10px;
			}
			
			#drop-menu a {
				color: white;
				line-height: 30px;
			}
			
			#top {
				width: 730px;
				height: 30px;
				position: absolute;
				top: 10px;
				right: 10px;
			}
			
			#language {
				position: absolute;
				right: 0;
				z-index: 10;
			}
			
			#top span {
				font-size: 10px;
				position: absolute;
				left: -20px;
				z-index: 2;
			}
			
			#language a {
				color: black;
				font-size: 13px;
			}
			
			#inter {
				width: 200px;
				height: 25px;
			}
			
			#middle {
				width: 910px;
				height: 360px;
				position: absolute;
				top: 120px;
				left: 455px;
			}
			
			#middleLeft {
				width: 606px;
				height: 360px;
				float: left;
			}
			
			#middleRight {
				width: 287px;
				height: 360px;
				float: right;
			}
			
			.swiper-button-next,
			.swiper-button-prev {
				background: black;
				opacity: 0.5;
				width: 30px;
				height: 50px;
			}
			
			#bottom {
				position: absolute;
				top: 530px;
				left: 454px;
				width: 910px;
			}			
			#bLeft {
				float: left;
			}
			
			#bRight {
				float: right;
			}			
			#codeImg {
				display: none;
				z-index: 5;
				position: absolute;
				top: -240px;
				right: 0;
			}
			
			#b-top {
				width: 500px;
				/*height: 30px;*/
				position: absolute;
				top: 100px;
				left: 300px;
				font-size: 10px;
			}
			
			#b-bottom {
				width: 500px;
				position: absolute;
				font-size: 10px;
				top: 150px;
				left: 210px;
				text-align: center;
			}
			#moveImgA{
				z-index: 10;
				position: relative;
				width: 287px;
				height: 154px;
				top: -360px;
				left: -1px;
				overflow: hidden;
			}
			#moveImgA1,#moveImgB1,#moveImgC1{
				position: absolute;
				top: -157px;
				
			}
			#moveImgA2,#moveImgB2,#moveImgC2{
				position: absolute;
				left: -287px;
				top: 30px;
			}
			#moveImgA3,#moveImgB3,#moveImgC3{
				position: absolute;
				left: -287px;
				bottom: 0px;
			}					
		</style>
	</head>

	<body>
		<!--全局div-->
		<div id="main">
			<div id="header">
				<a href="###" id="logo"><img src="../img/logo.jpg" /></a>
				<div id="top">
					<span>中国</span>
					<div id="language">
						<select name="" id="inter">
							<option value="">select language</option>
							<option value="">Chinese</option>
							<option value="">English</option>
						</select> 丨
						<a href="###">进入全球官网</a>
					</div>
				</div>
				<div id="nav">
					<ul>
						<li>
							<a href="###">新闻动态</a>
						</li>
						<li id="drop">
							<a href="###">美食与营养</a>
						</li>
						<li>
							<a href="###">加盟流程</a>
						</li>
						<li>
							<a href="###">关于我们</a>
						</li>
						<li class="last">
							<a href="###">快餐店位置查询</a>
						</li>
					</ul>
				</div>
				<!--美食与营养下拉菜单-->
				<div id="drop-menu">
					<ul>
						<li>
							<a href="###">超值 Value</a>
						</li>
						<hr />
						<li>
							<a href="###">经典 Classic</a>
						</li>
						<hr />
						<li>
							<a href="###">精选 Premium</a>
						</li>
						<hr />
						<li>
							<a href="###">低脂 Low Fat</a>
						</li>
						<hr />
						<li>
							<a href="###">百味卷 Wrap</a>
						</li>
						<hr />
						<li>
							<a href="###">沙拉 Salad</a>
						</li>
						<hr />
						<li>
							<a href="###">聚餐服务 Catering</a>
						</li>
						<hr />
						<li>
							<a href="###">饮料和小食 Drinks Sides</a>
						</li>
						<hr />
						<li>
							<a href="###">早餐 Breakfast</a>
						</li>
						<hr />
						<li>
							<a href="###">营养 Nutrition</a>
						</li>
						<hr />
						<li>
							<a href="###">如何点餐 How To Order</a>
						</li>
					</ul>
				</div>
			</div>
			<!--中间动图-->
			<div id="middle">
				<div id="middleLeft" class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="../img/20160929204151052ccd.jpg" /></div>
						<div class="swiper-slide"><img src="../img/2016040117224114977a.png" /></div>
					</div>
					<div class="swiper-button-prev swiper-button-white"></div>
					<div class="swiper-button-next swiper-button-white"></div>
				</div>
				<div id="middleRight" class="swper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="../img/pic1.jpg" /></div>
						<div class="swiper-slide"><img src="../img/pic2.jpg" /></div>
						<div class="swiper-slide"><img src="../img/FD5D8E94953CA13511B895B5270A1C73.jpg	" /> </div>						
					</div>
					<div id="moveImgA">
						<div id="moveImgA1"><img src="../img/47A10240D8DD67A57875FBD1497C6CAE.png"/></div>
						<div id="moveImgA2"><img src="../img/A7E286EE86076C463CBDD5E87F0FB20A.png"/></div>
						<div id="moveImgA3"><img src="../img/000E0D4F5420FE5EE4CE6D894B90A78D.png"/></div>
						<div id="moveImgB1"><img src="../img/tbg2.png"/></div>
						<div id="moveImgB2"><img src="../img/t2 (1).png"/></div>
						<div id="moveImgB3"><img src="../img/w2ch.png"/></div>
						<div id="moveImgC1"><img src="../img/tbg3.png"/></div>
						<div id="moveImgC2"><img src="../img/t3.png"/></div>
						<div id="moveImgC3"><img src="../img/w3.png"/></div>
					</div>	
				</div>
			</div>
			<!--下部-->
			<div id="bottom">
				<div id="bLeft">
					<a href="###"><img src="../img/home-box-1_CN.jpg" /></a>
					<a href="###"><img src="../img/home-box-2_CN.jpg" /></a>
					<a href="###"><img src="../img/home-box-3_CN.jpg" /></a>
				</div>
				<div id="bRight">
					<a href="###"><img src="../img/weibo_CN.jpg" /></a>
					<a href=""><img src="../img/weixin_CN.jpg" id="weChat" /></a>
					<img src="../img/code.png" id="codeImg" />
				</div>
				<p id="b-top">
					<a href="###">主页</a>丨
					<a href="###">菜单/营养</a> 丨
					<a href="###">如何加盟 </a> 丨
					<a href="###">关于我们</a> 丨
					<a href="###">快餐店位置查询</a>
					<br />
					<a href="###">联系我们</a> 丨
					<a href="###"> 使用条款</a> 丨
					<a href="###">隐私权政策</a> 丨
					<a href="###">SUBWAY Partners™</a>
				</p>
				<p id="b-bottom">
					SUBWAY® is a Registered Trademark of Subway IP Inc.
					<br /> ®2016 Subway IP Inc.
				</p>
			</div>
		</div>
		<script>
			var mySwiper = new Swiper('.swiper-container', {
				autoplay: 5000,
				prevButton: '.swiper-button-prev',
				nextButton: '.swiper-button-next',
			})
			// 美食下拉菜单
			var dropMenu = document.getElementById("drop-menu");
			var drop = document.getElementById("drop");
			var weChat = document.getElementById("weChat");
			var codeImg = document.getElementById("codeImg");
			var theaArr = document.querySelectorAll("#drop-menu a");
			var btImgArr = document.querySelectorAll("#bottom img");
			var selOpition = document.querySelectorAll("#inter>option");
			
			// 下拉菜单
			drop.onmouseover = function() {
				dropMenu.style.display = "block";
				for(var i = 0; i < theaArr.length; i++) {
					theaArr[i].onmouseover = function() {
						this.style.color = "gold";
					}
					theaArr[i].onmouseout = function() {
						this.style.color = "";
					}
				}
			}
			dropMenu.onmouseleave = function() {
					dropMenu.style.display = "none";
			}
			// 二维码图片
			weChat.onmouseover = function() {
				codeImg.style.display = "block";
			}
			weChat.onmouseout = function() {
				codeImg.style.display = "none";
			}
			
			for (var i = 0; i < btImgArr.length; i++){
				btImgArr[i].onmouseenter = function(){
					this.style.background = "gold";
					
				}
			}
			// 右边图片动画效果
	        var theSwiper = new Swiper('.swper-container', {
				autoplay: 7000,
				effect: 'fade',
				fade: {
					crossFade: false,
				}
			})
	        			     
	        // 第一个动画
	       	function moveImg(){
			$("#moveImgA1")	.animate({marginTop: "157px"},1000,function(){
				$("#moveImgA2").animate({marginLeft: "287px"},1000,function(){
					$("#moveImgA3").animate({marginLeft: "287px"},1000,function(){
						$("#moveImgA2")
						.delay(2000)
						.animate({marginLeft: "574px"},1000,function(){
							$("#moveImgA3").animate({marginLeft: "574px"},1000,function(){
								$("#moveImgA1").animate({marginTop: "-157px"},function(){
									// 第二个动画
									$("#moveImgB1").animate({marginTop: "157px"},1000,function(){
										$("#moveImgB2").animate({marginLeft: "287px"},1000,function(){
											$("#moveImgB3").animate({marginLeft: "287px"},1000,function(){
												$("#moveImgB2")
												.delay(2000)
												.animate({marginLeft: "574px"},1000,function(){
													$("#moveImgB3").animate({marginLeft: "574px"},1000,function(){
														$("#moveImgB1").animate({marginTop: "-157px"},function(){
													// 第三个动画
														$("#moveImgC1").animate({marginTop: "157px"},1000,function(){
										                $("#moveImgC2").animate({marginLeft: "287px"},1000,function(){
											            $("#moveImgC3").animate({marginLeft: "287px"},1000,function(){
												     $("#moveImgC2")
												     .delay(2000)
												     .animate({marginLeft: "574px"},1000,function(){
													 $("#moveImgC3").animate({marginLeft: "574px"},function(){
														$("#moveImgC1").animate({marginTop: "-157px"},function(){
															$("#moveImgA2").css({marginLeft: "-574px"})
															$("#moveImgA3").css({marginLeft: "-574px"})
															$("#moveImgB2").css({marginLeft: "-574px"})
															$("#moveImgB3").css({marginLeft: "-574px"})
															$("#moveImgC2").css({marginLeft: "-574px"})
															$("#moveImgC3").css({marginLeft: "-574px"})
															moveImg();
															
														})
													})
												})
											})
										})
									})	
														})
													})
												})
											})
										})
									})
								})
							})
						})
						
					})
				})
			});
		}
		moveImg()
		// 国际化
		
		
		</script>
	</body>

</html>